﻿@using JinJun.YShow.Model;
@{
    List<OrderType> OrderType = ViewBag.OrderType as List<OrderType>;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link href="~/css/shop.css" type="text/css" rel="stylesheet" />
    <link href="~/css/Sellerber.css" type="text/css" rel="stylesheet" />
    <link href="~/css/bkg_ui.css" type="text/css" rel="stylesheet" />
    <link href="~/font/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="~/layui-v2.5.4/layui/css/layui.css" media="all" />
    <script src="~/js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="~/js/jquery.cookie.js"></script>
    <script src="~/js/shopFrame.js" type="text/javascript"></script>
    <script src="~/js/Sellerber.js" type="text/javascript"></script>
    <script src="~/js/layer/layer.js" type="text/javascript"></script>
    <script src="~/js/laydate/laydate.js" type="text/javascript"></script>
    <script type="text/javascript" src="~/js/proTree.js"></script>
    <script src="~/js/jquery.easy-pie-chart.min.js"></script>
    <script src="~/layui-v2.5.4/layui/layui.js"></script>
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js" type="text/javascript"></script>
    <script src="js/respond.min.js"></script>
    <script src="js/css3-mediaqueries.js"  type="text/javascript"></script>
      <![endif]-->
    <title>订单列表</title>
</head>
<body>
    <div class="margin" id="page_style">
        <div class="operation clearfix mb15 same_module cover_style p0" id="Order_form_style">
            <div class="type_title">购物产品比例</div>
            <div class="hide_style clearfix">
                @foreach (var item in @OrderType)
                {
                    <div class="proportion">
                        <div class="easy-pie-chart percentage" data-percent="20" data-color="#D15B47">
                            <span class="percent">
                                @item.Count
                            </span>%
                        </div><span class="name">@item.CategoryName</span>
                    </div>
                    @*<div class="proportion"> <div class="easy-pie-chart percentage" data-percent="55" data-color="#87CEEB"><span class="percent">55</span>%</div><span class="name">服装类</span></div>
                        <div class="proportion"> <div class="easy-pie-chart percentage" data-percent="90" data-color="#87B87F"><span class="percent">90</span>%</div><span class="name">数码配件</span></div>
                        <div class="proportion"> <div class="easy-pie-chart percentage" data-percent="30" data-color="#d63116"><span class="percent">30</span>%</div><span class="name">手机</span></div>
                        <div class="proportion"> <div class="easy-pie-chart percentage" data-percent="60" data-color="#ff6600"><span class="percent">60</span>%</div><span class="name">电脑</span></div>
                        <div class="proportion"> <div class="easy-pie-chart percentage" data-percent="40" data-color="#2ab023"><span class="percent">40</span>%</div><span class="name">电子产品</span></div>
                        <div class="proportion"> <div class="easy-pie-chart percentage" data-percent="46" data-color="#1e3ae6"><span class="percent">46</span>%</div><span class="name">厨房用品</span></div>
                        <div class="proportion"> <div class="easy-pie-chart percentage" data-percent="65" data-color="#c316a9"><span class="percent">65</span>%</div><span class="name">家用电器</span></div>
                        <div class="proportion"> <div class="easy-pie-chart percentage" data-percent="56" data-color="#13a9e1"><span class="percent">56</span>%</div><span class="name">卫浴</span></div>*@
                }
            </div>
        </div>
        <!--列表展示-->
        <div class="h_products_list clearfix" id="Sellerber">
            <div class="Sellerber_left menu" id="menuBar">
                <div class="show_btn" id="rightArrow"><span></span></div>
                <div class="side_title"><a title="隐藏" class="close_btn"><span></span></a></div>
                <div class="menu_style" id="menu_style">
                    <div class="list_content">
                        <div class="side_list">
                            <div class="column_title"><h4 class="lighter smaller">订单类型</h4></div>
                            <div class="st_tree_style tree">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="list_Exhibition list_show padding15">
                <div class="operation clearfix mb15 searchs_style">
                    <button class="btn button_btn btn-danger" id="batchdel" type="button" onclick=""><i class="fa fa-trash-o"></i>&nbsp;批量删除</button>
                    <span class="submenu">
                    </span>
                    <div class="search  clearfix">
                        <label class="label_name">商品搜索：</label>
                        <input class="laydate-icon col-xs-2 col-lg-2 form-control Select_Date" id="adddate" type="text" />
                        <span style=" float:left; padding:0px 10px; line-height:32px;">至</span>
                        <input class="laydate-icon col-xs-2 col-lg-2 form-control Select_Date" id="enddate" type="text" />
                        @*<input name="" type="text" class="form-control col-xs-3 col-lg-4" />*@<button class="btn button_btn bg-deep-blue " id="check" onclick="" type="button"><i class="fa  fa-search"></i>&nbsp;搜索</button>
                        <span>数量：343件</span>
                    </div>
                </div>
                <div class="datalist_show">
                    <div class="datatable_height confirm">
                        <table class="layui-hide" id="test" lay-filter="demo"></table>
                        <script type="text/html" id="barDemo">
                            <a class="layui-btn layui-btn-xs" id="Back" lay-event="down">发货</a>
                            <a class="layui-btn layui-btn-xs" id="Back" lay-event="edit">编辑</a>
                            <a class="layui-btn layui-btn-xs" id="Back" lay-event="del">删除</a>
                        </script>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--发货-->
    <div id="Delivery_stop" style=" display:none">
        <div class="padding15">
            <div class="content_style">
                <div class="form-group">
                    <label class="col-sm-2 control-label no-padding-right" for="form-field-1">快递公司 </label>
                    <div class="col-sm-9">
                        <select class="form-control col-xs-8 col-sm-8 col-md-8" id="form-field-select-1">
                            <option value="">--选择快递--</option>
                            <option value="1">天天快递</option>
                            <option value="2">圆通快递</option>
                            <option value="3">中通快递</option>
                            <option value="4">顺丰快递</option>
                            <option value="5">申通快递</option>
                            <option value="6">邮政EMS</option>
                            <option value="7">邮政小包</option>
                            <option value="8">韵达快递</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label no-padding-right" for="form-field-1"> 快递号 </label>
                    <div class="col-xs-8 col-sm-8 col-md-8 col-lg-9"><input type="text" id="form-field-1" placeholder="快递号" class="col-xs-10 col-sm-8 col-xs-8" style="margin-left:0px;" /></div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label no-padding-right" for="form-field-1">货到付款 </label>
                    <div class="col-sm-9"><label class="col-sm-2 " style="display: block; margin-top:6px"><input name="checkbox" type="checkbox" class="ace" id="checkbox" /><span class="lbl"></span></label></div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
@*<script type="text/html" id="imgUrl">
        <img src="{{d.Product_Name}}" />
    </script>*@
<script src="~/js/Format.js"></script>
<script type="text/javascript">

    //列表刷新
    function TableReload() {
        var table = layui.table;
        //获取页面管理员名称和时间
        var adddate = $("#adddate").val();
        var enddate = $("#enddate").val();
        //上述方法等价于
        table.reload('testReload', {
            where: { //设定异步数据接口的额外参数，任意设
                adddate: adddate,
                enddate: enddate
            }
        });
    }


    //查询按钮点击事件
    $("#check").click(function () {
        TableReload(null);
    });


    //layui数据表格
    layui.use('table', function () {
        var table = layui.table
        ,form = layui.form;
        table.render({
            elem: '#test'
            , url: '/Order/GetOrderList'
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , cols: [[
                { type: 'checkbox' }  //这段是加的
                , { field: 'Order_No', width: 100, title: '订单编号', align: 'center' }
                , { field: 'Product_Name', width: 210, title: '产品名称', /*templet: '#imgUrl',*/ align: 'center' }
                , { field: 'Order_Money', width: 250, title: '总价', align: 'center', unresize: true }
                , { field: 'District_Money', title: '优惠金额', width: 150, align: 'center', unresize: true }
                , { field: 'CreateTime', title: '下单时间', width: 300, align: 'center', unresize: true, templet: "<div>{{Format(d.CreateTime,'yyyy-MM-dd hh:mm:ss')}}</div>" }
                , { field: 'Order_Status', title: '状态', width: 180 }
                , { field: 'Product_Cnt', width: 150, title: '数量', align: 'center', templet: '#switchShow', unresize: true }
                , { fixed: 'right', title: '操作', width: 280, align: 'center', toolbar: '#barDemo' }
            ]]
            , page: true
            , id: 'testReload'
        });



        //监听工具条
        table.on('tool(demo)', function (obj) { //obj当前记录
            var data = obj.data;
            var id = data.Order_Id;
            if (obj.event == 'del') {   //删除功能的代码
                $.ajax({
                    url: "/Order/Delete?id=" + id,
                    type: "post",
                    success: function (result) {
                        if (result.Success) {
                            layer.confirm('真的删除么?', function (index) {
                                obj.del();
                                layer.msg('删除成功!', { title: '提示框', icon: 1, time: 2000 }, function () { window.location.reload() });
                                layer.close(index);
                            });
                        }
                        else {
                            layer.msg('删除失败!', { title: '提示框', icon: 0, time: 2000 });
                        }
                    }
                });
            } else if (obj.event == 'down') {   //发货功能的代码
                if (data.Order_Status == 0) {
                    data.Order_Status = 1;
                }
                else {
                    data.Order_Status = 0;
                }
                $.ajax({
                    url: "/Order/UpdateStatus",
                    type: "post",
                    data: data,
                    success: function (result) {
                        if (result.Success) {
                            layer.confirm('确认发货么?', function (index) {
                                layer.msg('发货成功!', { title: '提示框', icon: 1, time: 2000 }, function () { window.location.reload() });
                                layer.close(index);
                            });
                        }
                        else {
                            layer.msg('发货失败!', { title: '提示框', icon: 0, time: 2000 });
                        }
                    }
                });
            } else if (obj.event === 'edit') {  //编辑功能的代码
                location.href = "/Home/Order_Edit?id=" + id;
            }
        });



        //批量删除点击事件
        $("#batchdel").click(function () {
            var checkStatus = table.checkStatus('testReload');
            var data = checkStatus.data;
            if (data.length == 0) {
                layer.msg('至少选中一条数据!', { title: '提示框', icon: 0, time: 2000 });
                return;
            }
            var id = "";
            for (var i = 0; i < data.length; i++) {
                if (i == data.length - 1) {
                    id += data[i].Order_Id;
                }
                else {
                    id += data[i].Order_Id + ",";
                }
            }
            $.ajax({
                url: "/Order/BatchDeleteById?id=" + id,
                type: "post",
                success: function (result) {
                    if (result.Success) {
                        layer.msg('删除成功!', { title: '提示框', icon: 1, time: 2000 },function () {window.location.reload() });
                    }
                    else {
                        layer.msg('删除失败!', { title: '提示框', icon: 0, time: 2000 });
                    }
                }
            });
        });
    });






    //设置内页框架布局
    $(function () {
        $("#Sellerber").frame({
            float: 'left',
            color_btn: '.skin_select',
            Sellerber_menu: '.list_content',
            page_content: '.list_show',//内容
            datalist: ".datatable_height",//数据列表高度取值
            header: 65,//顶部高度
            mwidth: 200,//菜单栏宽度
            minStatue: true,

        });
    });


    //后台传入的 标题列表
    var str = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(@ViewBag.number));
    //转换Json
    var json = eval('(' + str + ')');
    alert(str);
    var arr = json;


    //var arr = [{
    //    id: 1,
    //    name: "食品/酒类/特产",
    //    amount: 234,
    //    pid: 0,

    //}, {
    //    id: 2,
    //    name: "数码家电",
    //    amount: 64,
    //    pid: 0,

    //}, {
    //    id: 3,
    //    name: "家具/家居",
    //    amount: 64,
    //    pid: 0,

    //}, {
    //    id: 4,
    //    name: "电脑办公",
    //    amount: 64,
    //    pid: 0,

    //}, {
    //    id: 5,
    //    name: "图书影响",
    //    amount: 64,
    //    pid: 0,

    //}, {
    //    id: 6,
    //    name: "母婴用品",
    //    amount: 64,
    //    pid: 0,

    //}, {
    //    id: 13,
    //    name: "牛奶",
    //    amount: 64,
    //    pid: 1
    //}, {
    //    id: 14,
    //    name: "面包",
    //    amount: 64,
    //    pid: 1
    //}, {
    //    id: 15,
    //    name: "饼干",
    //    amount: 64,
    //    pid: 1
    //}, {
    //    id: 16,
    //    name: "白酒",
    //    amount: 64,
    //    pid: 1
    //}, {
    //    id: 17,
    //    name: "啤酒",
    //    amount: 64,
    //    pid: 1
    //}, {
    //    id: 18,
    //    name: "红酒",
    //    amount: 64,
    //    pid: 1
    //}, {
    //    id: 19,
    //    name: "音响",
    //    amount: 64,
    //    pid: 2
    //}, {
    //    id: 20,
    //    name: "冰箱",
    //    amount: 64,
    //    pid: 2
    //}, {
    //    id: 21,
    //    name: "洗衣机",
    //    amount: 64,
    //    pid: 2
    //}, {
    //    id: 21,
    //    name: "洗衣机",
    //    amount: 64,
    //    pid: 3
    //}, {
    //    id: 21,
    //    name: "洗衣机",
    //    amount: 64,
    //    pid: 4
    //}, {
    //    id: 21,
    //    name: "洗衣机",
    //    amount: 64,
    //    pid: 5
    //}

    //];



    //树状图插件
    $(".tree").ProTree({
        arr: arr,//数据
        simIcon: "fa fa-file-text-o",//单个标题字体图标 不传默认glyphicon-file
        mouIconOpen: "fa fa-folder-open",//含多个标题的打开字体图标  不传默认glyphicon-folder-open
        mouIconClose: "fa fa-folder",//含多个标题的关闭的字体图标  不传默认glyphicon-folder-close

    })



    ///******时间设置*******/
    //var start = {
    //    elem: '#start',
    //    format: 'YYYY-MM-DD',
    //    // min: laydate.now(), //设定最小日期为当前日期
    //    max: '2099-06-16', //最大日期
    //    istime: true,
    //    istoday: false,
    //    choose: function (datas) {
    //        end.min = datas; //开始日选好后，重置结束日的最小日期
    //        end.start = datas //将结束日的初始值设定为开始日
    //    }
    //};
    //var end = {
    //    elem: '#end',
    //    format: 'YYYY-MM-DD',
    //    //min: laydate.now(),
    //    max: '2099-06-16',
    //    istime: true,
    //    istoday: false,
    //    choose: function (datas) {
    //        start.max = datas; //结束日选好后，重置开始日的最大日期
    //    }
    //};
    //laydate(start);
    //laydate(end);
    /*订单-删除*/
    function Order_form_del(obj, id) {
        layer.confirm('确认要删除吗？', function (index) {
            $(obj).parents("tr").remove();
            layer.msg('已删除!', { icon: 1, time: 1000 });
        });
    }
    /**发货**/
    function Delivery_stop(obj, id) {
        layer.open({
            type: 1,
            title: '发货',
            maxmin: true,
            shadeClose: false,
            area: ['500px', ''],
            content: $('#Delivery_stop'),
            btn: ['确定', '取消'],
            yes: function (index, layero) {
                if ($('#form-field-1').val() == "") {
                    layer.alert('快递号不能为空！', {
                        title: '提示框',
                        icon: 0,
                    })

                } else {
                    layer.confirm('提交成功！', function (index) {
                        $(obj).parents("tr").find(".td-manage").prepend('<a style=" display:none" class="btn btn-xs btn-success" onClick="member_stop(this,id)" href="javascript:;" title="已发货"><i class="fa fa-cubes bigger-120"></i></a>');
                        $(obj).parents("tr").find(".td-status").html('<span class="label label-defaunt radius">已发货</span>');
                        $(obj).remove();
                        layer.msg('已发货!', { icon: 6, time: 1000 });
                    });
                    layer.close(index);
                }

            }
        })
    };
    var oldie = /msie\s*(8|7|6)/.test(navigator.userAgent.toLowerCase());
    $('.easy-pie-chart.percentage').each(function () {
        $(this).easyPieChart({
            barColor: $(this).data('color'),
            trackColor: '#EEEEEE',
            scaleColor: false,
            lineCap: 'butt',
            lineWidth: 10,
            animate: oldie ? false : 1000,
            size: 103
        }).css('color', $(this).data('color'));
    });
</script>
